<!-- 公告列表 -->
<!-- 公告列表 -->
<!-- 公告列表 -->

<template>
  <div>
    <myDivider name="晨会管理"></myDivider>

    <!-- 顶部搜索 -->
    <div class="top">
      <div>
        <el-date-picker @change="TimeChange" value-format="yyyy.MM.dd" style="width: 250px;cursor: pointer;"
          v-model="typeTime" type="daterange" unlink-panels :range-separator="null" start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>

        <el-input class="width1" @keyup.enter.native="getTableList" clearable v-model="keyUnitName"
          placeholder="根据单位名称搜索" maxlength="20"></el-input>
        <el-input class="width1" @keyup.enter.native="getTableList" clearable v-model="keydeptName"
          placeholder="根据部门名称搜索" maxlength="20"></el-input>

        <el-button type="primary" @click="SouSuo">查询</el-button>
        <el-button @click="reset">重置</el-button>
      </div>
      <el-button style="margin-top: 10px;" class="add" type="primary"
        @click="$router.push('/morningMeeting/morningMeetingAdd?type=add')">新增</el-button>
    </div>

    <!-- 表格列表 -->
    <div class="tableBox">
      <el-table :data="tableData" style="width: 100%;margin-top: 50px">
        <el-table-column align="center" prop="meetingTime" label="日期" width="150">
        </el-table-column>
        <el-table-column align="center" prop="unitName" label="单位名称" width="300">
        </el-table-column>
        <el-table-column align="center" prop="deptName" label="参与部门" width="250">
        </el-table-column>
        <el-table-column align="center" prop="count" label="参会人数" width="250">
          <template slot-scope="scope">
            <span>{{ scope.row.count + '人' }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="description" label="会议概要">

          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" :content="scope.row.description" placement="top-start">
              <span> {{
            scope.row.description.length > 8 ? '...' + scope.row.description.slice(scope.row.description.length - 8)
              :
              scope.row.description
          }}</span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="200">

          <template slot-scope="scope">

            <div class="textBtn">
              <el-row>
                <el-col class="el" :span="24">
                  <span style="color: #5fadff;cursor: pointer;font-weight: 600;"
                    @click="Preview('XQform', scope.row)">详情</span>
                </el-col>
              </el-row>
            </div>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="roomName" label="房间信息" width="200">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" :content="scope.row.roomName" placement="top-start">
              <span> {{
                scope.row.roomName.length > 8 ? '...' + scope.row.roomName.slice(scope.row.roomName.length - 8) :
                scope.row.roomName
              }}</span>
            </el-tooltip>
          </template> 
        </el-table-column> -->
      </el-table>
    </div>

    <!-- 分页器 -->
    <myPagination :pageNum="pageNum" :total="total" @PageChange="PageChange" @pageSizeChange="pageSizeChange">
    </myPagination>
    <!-- 所有弹窗 -->


  </div>
</template>

<script>
export default {
  data() {
    return {
      props: {
        checkStrictly: true,
        value: 'id',
        label: 'name'
      },

      typeTime: ['', ''],
      keyUnitName: '',
      keydeptName: '',
      // 表格数据
      tableData: [],
      // 分页器
      total: 1,
      pageNum: 1,
      pageSize: 10,
    }
  },
  async activated() {
    this.typeTime = ['', '']
    this.keyUnitName = ''
    this.keydeptName = ''
    this.getTableList()
  },
  deactivated() {

  },
  methods: {
    reset() {
      this.keyUnitName = ''
      this.keydeptName = ''
      this.typeTime = ['', '']
      this.pageNum = 1
      this.getTableList()
    },
    SouSuo() {
      this.pageNum = 1
      this.getTableList()
    },
    TimeChange(val) {
      if (!val) this.typeTime = ['', '']
      this.pageNum = 1
      this.getTableList()
    },

    keytypeChange(val) {//顶部按钮 筛选消息类型
      console.log(val);
    },
    async getTableList() { // 获取表格列表
      if (!this.typeTime) {
        this.typeTime = ['', '']
      }
      let userData = JSON.parse(sessionStorage.getItem('logOnUser'))
      let params = {
        "unitType": userData.unitType,
        "unitId": userData.unitId, //单位id
        "deptName": this.keydeptName,
        "paramUnitName": this.keyUnitName,
        "start": this.typeTime[0],
        "end": this.typeTime[1],
        "pageSize": this.pageSize,
        "pageNum": this.pageNum,
      }
      console.log(params, 'params');
      let res = await this.$api.metting.getMeetingList(params)
      if (res.data.list.length < 1 && this.pageNum != 1) { //判断，当搜索关键字有内容时，我直接点击分页，会造成关键词列表中没有某某页的数据，那么我就用第一页重新请求一次
        this.pageNum = 1
        this.getTableList()
        return
      }
      this.tableData = res.data.list
      this.total = res.data.total
    },
    pageSizeChange(e) { //分页器——每页数量变化
      this.pageNum = 1
      this.pageSize = e
      this.getTableList()
    },
    PageChange(e) {//分页器——页数变化
      this.pageNum = e
      this.getTableList()
    },

    Preview(formName, row) { //表格按钮
      switch (formName) {
        case 'XQform': //点击预览
          this.$router.push('/morningMeeting/morningMeetingAdd?type=detail&id=' + row.id)
          break
      }
    },
    popOk(formName) { //弹窗确认接口
      switch (formName) {

      }
    },
    popClose(formName) { //弹窗取消按钮
      switch (formName) {

      }
    },
    popCloseChange(formname) { // 弹窗每次关闭时的函数
      switch (formname) {
      }
    },

  },
}
</script>

<style lang="less" scoped>
.width1 {
  width: 200px;
}


.top {
  width: 100%;
  padding: 20px 30px;
  box-sizing: border-box;


}

.textBtn {
  position: relative;

  /deep/ .el-row {
    display: flex;
    justify-content: center;
  }

  .el {
    display: block;
    position: relative;

    &:nth-child(n+2) {
      &::after {
        position: absolute;
        left: -1px;
        top: 50%;
        content: '';
        width: 2px;
        transform: translateY(-50%) scale(0.5, 1);
        height: 10px;
        background-color: #aaa;
      }
    }
  }
}
</style>